<template>
  <div class="top-bar">
    <section class="top-bar-left">
      <breadcrumb></breadcrumb>
    </section>
    <section class="top-bar-center"></section>
    <section class="top-bar-right">
      <!-- <el-input v-if="store.role === 'student'" class="stage-display" v-model="stuStageInfo" disabled></el-input>
      <el-select v-else v-model="store.currentStage" class="stage-display" @change="onChange">
        <el-option v-for="item in store.tchCoYearList" :key="item.stage" :label="item.stage + '期' + item.department + '部'" :value="item.stage" />
      </el-select> -->

      <img :src="avatarSrc" style="object-fit: cover;" @click="onChangeAvatar" class="top-bar-right-item">
      <!-- <el-avatar :size="46" :src="avatarSrc" @click="onChangeAvatar" class="top-bar-right-item" /> -->
      <article  class="top-bar-right-item" @click="onOpenInfoDialog">{{ loginData.name }}</article>
      <more-buttons></more-buttons>
    </section>
    <avatar-dialog ref="avatarDialogRef"></avatar-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { APIData, IStu, ITch } from '../../type';
import { useUserStore } from '../../store/user';
import { defineAsyncComponent } from 'vue';
import { useAPI } from '../../request/api';
import Breadcrumb from '../breadcrumb/Index.vue';
import AvatarDialog from './AvatarDialog.vue';
import { ElMessage } from 'element-plus';

const MoreButtons = defineAsyncComponent(() => import('./MoreButtons.vue'));
const userStore = useUserStore();
const api = useAPI();
const loginData = ref({} as IStu | ITch);
const avatarDialogRef = ref();

onMounted(() => {
  loginData.value = userStore.userInfo;
});

userStore.$subscribe((args: any, states) => {
  if(loginData.value.name == states.userInfo.name) return;
  loginData.value = states.userInfo;
});

const avatarSrc = computed(() => {
  if(userStore.userInfo.avatarUrl) return userStore.userInfo.avatarUrl;
  else return 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
});

const onChangeAvatar = () => {
  avatarDialogRef.value.open();
  // avatarDialogRef.value.open(userStore.userInfo,userStore.role);
}

const emit = defineEmits(['openInfoDialog']);
const onOpenInfoDialog = () => {
  emit('openInfoDialog');
};
</script>

<style lang="scss" scoped>
.top-bar {
  width: 100%;
  height: 100%;
  padding: 16px;
  display: flex;
  // border: 2px solid red;
  .stage-display {
    margin-right: 8px;
  }

  .el-input {
    width: 110px;
  }
  :deep(.el-input.is-disabled),
  :deep(.el-input.is-disabled .el-input__inner) {
    cursor: pointer;
  }

  :deep(.el-input__wrapper) {
    width: 110px;
    box-shadow: 0 0 0 0;
    border: 1px solid var(--border-color);
    border-radius: 0;
    border-width: 0 0 1px 0 !important;
  }
  :deep(.el-input.is-focus .el-input__wrapper),
  :deep(.el-input__wrapper.is-focus),
  :deep(.el-input__wrapper):hover {
    box-shadow: 0 0 0 0 !important;
  }

  &-left {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    // border: 2px solid green;
  }
  &-center {
    flex: 1;
    // border: 2px solid red;
  }
  &-right {
    width: 30%;
    height: 100%;
    // border: 2px solid green;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    img {
      width: 46px;
      height: 46px;
      border-radius: 23px;
    }

    &-item {
      margin: 0 8px;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.5s ease;
    }
    &-item:hover {
      transform: translateY(-6px);
      // transition: all 0.3s ease;
    }
  }
}
</style>
